<template>
  <div>
    <div class="table">
      <template>
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="42" align="center"> </el-table-column>
          <el-table-column type="index" width="55" label="序号" align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="劳务公司名称"
            width="180"
            align="center"
          >
          <template slot-scope="scope">
              <div>
                  <el-button type="text" @click="toDetails">{{ tableData[scope.$index].name }}</el-button>
              </div>
          </template>
          </el-table-column>
          <el-table-column label="项目开始时间" align="center">
            <template slot-scope="scope">
              <div>
                {{ tableData[scope.$index].startTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="项目结束时间" align="center">
            <template slot-scope="scope">
              <div>
                {{ tableData[scope.$index].endTime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作人" align="center">
          </el-table-column>
          <el-table-column label="操作时间" align="center">
            <template slot-scope="scope">
              <div>
                {{ tableData[scope.$index].oprateTime }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="list-block row">
      <div class="page-tag">
        共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
      </div>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="totalData"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedList: [],
      currentPage: 1,
      pageSize: 10,
      totalData: 1000,
      options: [10, 20, 30, 40],
      tableData: [
        {
          id: "1",
          name: "项目1",
          startTime: "2019/11/12",
          endTime: "2019/11/12",
          operator: "张三",
          oprateTime: "2019/11/12",
        },
        {
          id: "1",
          name: "项目1",
          startTime: "2019/11/12",
          endTime: "2019/11/12",
          operator: "张三",
          oprateTime: "2019/11/12",
        },
        {
          id: "1",
          name: "项目1",
          startTime: "2019/11/12",
          endTime: "2019/11/12",
          operator: "张三",
          oprateTime: "2019/11/12",
        },
      ],
    };
  },
  methods: {
    handleSelectionChange(res) {
      this.selectedList = res;
    //   console.log(res)
      this.$emit("getData",res)
    },
    handleCurrentChange() {
      // console.log(this.currentPage);
      this.getCPageData({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
    },
    toDetails(){
        console.log("details")
        this.$router.push({path:'details'})
    }
  },
};
</script>
<style lang="scss" scoped>
.table {
  margin-top: 10px;
}
.row{
  display: flex;
  flex-direction: row;
}
.list-block {
  width: 100%;
  height: 50px;
  text-align: right;
  margin-top: -1px;
  background-color: #ffffff;
  padding-top: 10px;
//   border: solid 2px #e4e4e4;
  padding-right: 10px;
  justify-content: flex-end;
  .page-tag {
    font-size: 13px;
    line-height: 30px;
  }
}

</style>
